<template>
  <div class="new shotbox">
      <div class="new-top title">
        {{pictureText.title}}
      </div>
      <div class="new-bottom">
        <el-row :gutter="20" class="row-height"> 
          <el-col :sm="24" :md="12">
            <el-card class="card" shadow="never" :body-style="{ padding: '5px' }">
              <img class="image" :src="url + pictureText.filePath" alt="">
            </el-card>
          </el-col>
          <el-col :sm="24" :md="12">
            <el-card class="card" shadow="never" :body-style="{ padding: '5px' }">
              <div class="new-right" style="">
                <!-- <div class="label">{{ pictureText.label }}:</div> -->
                <div class="content">
                    {{pictureText.discription}}
                </div>
                <div class="more"> 
                  <!-- <el-button type="text" class="button">MORE查看更多</el-button> -->
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </div>
</template>
<script>
import http from '@/utils/baseUrl'
export default {
  props:{
    pictureText: Object
  },
  data () {
    return {
      url: http,
    }
  }
}
</script>
<style scoped>
.new  img {
  width: 100%;
  height: 298px;
}
.new .new-bottom .label {
  padding: 0 2%;
  font-size: 18px;
  line-height: 26px;
  font-weight: bold;
}
.new .new-bottom .content {
  padding: 0 2%;
  text-indent: 2em;
  font-size: 16px;
  text-align: justify;
  line-height: 26px;
  overflow: hidden;
  height: 234px;
}
.row-height {
  display: flex;
  flex-flow: row wrap;
}
.row-height .card {
  height: 100%;
}
.el-card ::v-deep .el-card__body {
  height: 100%;
}
.new-right {
  height: 96%;
  display: flex;
  flex-direction: column;
}

.content {
  flex-grow: 1;
}

.more {
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
  padding: 0 2%;
}
</style>